<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>立即订购</title>
    <link rel="stylesheet" href="/css/userweb/bootstrap.min.css">
    <link rel="stylesheet" href="/css/loading.css">
    <link rel="stylesheet" href="/css/userweb/common.css">
    <link rel="stylesheet" href="/css/userweb/orderNow.css">
    <style type="text/css">
        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            -webkit-appearance: none;
        }
        input[type="number"]{
            -moz-appearance: textfield;
        }
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>
<div id="orderVue" v-cloak>
    <div class="header">
        <!--导航-->
        <div class="header_nav_container">
            <div class="header_nav_box">
                <div class="user_name">
                    <span>{{user_name}}</span>
                </div>
                <div class="header_nav">
                    <ul>
                        <li>
                            <a :href="'/userweb/index/index.html'">
                                <div class="title_zh">首页</div>
                                <div class="title_en">Home</div>
                            </a>
                        </li>
                        <li class="active">
                            <a :href="'/userweb/index/myShoppingCar.html'">
                                <div class="title_zh">购货车</div>
                                <div class="title_en">Shopping Car</div>
                            </a>
                        </li>
                        <li>
                            <a :href="'/userweb/index/collectionFolder.html'">
                                <div class="title_zh">收藏夹</div>
                                <div class="title_en">Collection folder</div>
                            </a>
                        </li>
                        <li>
                            <a :href="'/userweb/index/customerService.html'">
                                <div class="title_zh">联系客服</div>
                                <div class="title_en">Mine</div>
                            </a>
                        </li>
                        <li class="shop_search">
                            <input type="text" v-model="searchs" placeholder="搜索/Search">
                            <div class="shop_search_btn">
                                <a :href="'/userweb/index/index.html?search='+searchs">搜索/search</a>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="content">
        <div class="content_header">
            <div class="logo" onclick="homePage()">
                <span>小货郎</span>
            </div>
            <div class="cut_line"></div>
            <div class="page_title">
                <div class="title_zh">立即订购</div>
                <div class="title_en">place order</div>
            </div>
        </div>
        <div class="my_content_box" v-loading="loading">
            <div class="content_title">
                <span>确认订单信息/confirm order details</span>
            </div>
            <div class="order_list_content">
                <div class="cartMain_hd">
                    <ul class="order_col cartTop">
                        <li class="list_con">
                            <div class="title_zh">商品名称</div>
                            <div class="title_en">product name</div>
                        </li>
                        <li class="list_price">
                            <div class="title_zh">单价</div>
                            <div class="title_en">price</div>
                        </li>
                        <li class="list_info">
                            <div class="title_zh">商品规格</div>
                            <div class="title_en">specifications</div>
                        </li>
                        <li class="list_amount">
                            <div class="title_zh">数量</div>
                            <div class="title_en">quantity</div>
                        </li>
                        <li class="list_discount">
                            <div class="title_zh">优惠</div>
                            <div class="title_en">discount</div>
                        </li>
                        <li class="list_sum">
                            <div class="title_zh">增值税</div>
                            <div class="title_en">VAT</div>
                        </li>
                        <li class="list_op">
                            <div class="title_zh">小计</div>
                            <div class="title_en">subtotal</div>
                        </li>
                    </ul>
                </div>
                <div class="cartMain_hd_line">
                    <div class="line_style list_con_width"></div>
                    <div class="line_style list_info_width"></div>
                    <div class="line_style list_price_width"></div>
                    <div class="line_style list_amount_width"></div>
                    <div class="line_style list_sum_width"></div>
                    <div class="line_style list_op_width"></div>
                    <div class="line_style list_total_width"></div>
                </div>
            </div>
            <!--订单信息-->
            <div class="order_carBox" v-for="list in buy_car">
                <div class="cartBox">
                    <div class="shop_info">
                        <div class="shop_name">
                            <a :href="'/userweb/index/shopList.html?supplierId='+list.supplier_id" >
                                <div class="title_zh">{{list.supplier_name}}</div>
                            </a>
                        </div>
                    </div>
                    <div class="order_content" v-for="product in list.product">
                        <ul class="order_col">
                            <li class="list_con">
                                <div class="list_img">
                                    <a :href="'/userweb/index/productInfo.html?productId='+product.product_id">
                                        <img :src="oss_url + product.product_image" alt="">
                                    </a>
                                </div>
                                <div class="list_text">
                                    <a :href="'/userweb/index/productInfo.html?productId='+product.product_id">
                                        <div class="title_zh">{{product.product_name}}</div>
                                        <!--<div class="title_en">{{product.product_name_english}}</div>-->
                                    </a>
                                </div>
                            </li>
                            <li class="list_info">
                                <div class="order_quantity">
									<em>￡</em>
                                    <span>{{product.price}}</span>
                                </div>
                            </li>
                            <li class="list_price">
                                <div class="unit_price">
                                    <p class="price">{{product.specification}}{{product.unit}}</p>
                                </div>
                            </li>
                            <li class="list_amount">
                                <div class="amount_box">
                                    <div class="num_reduce" v-on:click="productNum(1,product,list)">
                                        <img src="/image/userweb/slicesImg/num-reduce.png" alt="" >
                                    </div>
                                    <input type="text" class="sum" v-model="product.num" v-on:input="productNum(3,product,list)">
                                    <div class="num_add" v-on:click="productNum(2,product,list)">
                                        <img src="/image/userweb/slicesImg/num-add.png" alt="">
                                    </div>
                                </div>
                            </li>
                            <li class="list_discount">
                                <div class="discount_value">{{product.discount}}</div>
                            </li>

                            <li class="list_sum">
                                <div class="sum_value">
                                    <em>￡</em>
                                    <span>{{product.total_tax}}</span>
                                </div>
                            </li>
                            <li class="list_op">
                                <div class="subtotal">
                                    <em>￡</em>
                                    <span>{{product.total_price}}</span>
                                </div>
                            </li>

                        </ul>
                    </div>
                </div>
                <!--<div class="zs_product_box" v-if="list.is_give == 1">
                    <div class="zs_title">
                        <div class="title_zh">满送商品</div>
                        <div class="title_en">full delivery of goods</div>
                    </div>
                    <div class="zs_product_img">
                        <img :src="list.give_product.image" alt="">
                    </div>
                    <div class="zs_product_name">{{list.give_product.name}}</div>
                    <div class="zs_product_num">×{{list.give_product.total_count}}</div>
                </div>-->
                <div class="buyer_message_box">
                    <div class="buyer_message_title">
                        <div class="title_zh">买家留言</div>
                        <div class="title_en">buyer's comment</div>
                    </div>
                    <div class="buyer_message_content">
                        <input type="text" v-model="list.message">
                    </div>
                </div>
                <div class="order_info_container">
                    <div class="order_bar">
                        <div class="order_info_left">
                            <div class="info_col">
                                <div class="order_info_title">
                                    <div class="title_zh">收货地址：</div>
                                    <div class="title_en">shipping address:</div>
                                </div>
                                <div class="order_info_content">
                                    <p>{{list.address}}</p>
                                </div>
                            </div>
                            <div class="info_col">
                                <div class="order_info_title">
                                    <div class="title_zh">收货电话：</div>
                                    <div class="title_en">telephone number：</div>
                                </div>
                                <div class="order_info_content">
                                    <p>{{list.tel}}</p>
                                </div>
                            </div>
                            <div class="info_col">
                                <div class="order_info_title">
                                    <div class="title_zh">送货日期：</div>
                                    <div class="title_en">delivery date:</div>
                                </div>
                                <div class="order_info_content">
                                    <p>{{list.send_date}}</p>
                                </div>
                            </div>
                        </div>
                        <div class="order_info_right">
                            <div class="order_body">
                                <div class="body_title">
                                    <div class="title_zh">总增值税</div>
                                    <div class="title_en">Total VAT</div>
                                </div>
                                <div class="body_cont">
                                    <em>￡</em>
                                    <span>{{list.totalTax}}</span>
                                </div>
                            </div>
                            <div class="order_body">
                                <div class="body_title">
                                    <div class="title_zh">收取总额</div>
                                    <div class="title_en">total charge</div>
                                </div>
                                <div class="body_cont">
                                    <em>￡</em>
                                    <span>{{list.totalMoney}}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="order_btn_box">
                <div class="submit_order_btn" v-on:click="confirmOrder()">
                    <div class="title_zh">确认订单</div>
                    <div class="title_en">confirm order</div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="slogan">
    <div class="slogan_title">
        <p>让我们的生活有更好的选择</p>
    </div>
    <div class="sub_slogan_title">
        <p>Let our lives have a better choice.</p>
    </div>
</div>
{include file="html/Common/indexFooter"}
</body>
<script src="/js/vue.js"></script>
<script src="/js/vue-resource.js"></script>
<script src="/js/loading.js"></script>
<script src="/js/userweb/jquery.min.js"></script>
<script src="/js/userweb/jquery.imagezoom.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/userweb/common.js"></script>
<script src="/js/layer.js"></script>
<script src="/js/userweb/indexHome/orderNow.js"></script>
<script>
    function openCollection() {
        $('.collection_box').show();
    }
    function closeCollection() {
        $('.collection_box').hide();
    }
    function homePage() {
        location.href = "/userweb/index/index.html";
    }
</script>
</html>